<template>
    <a-row :gutter="24">
        <a-col :md="24">
            <a-card :style="cardStyle" :bordered="false">
                <!-- 查询区域 -->
                <div class="table-page-search-wrapper">
                    <a-form layout="inline" @keyup.enter.native="searchQuery">
                        <a-row :gutter="24">
                            <a-col :md="5" :sm="24">
                                <a-form-item label="商品信息" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                    <a-input placeholder="条码/名称/规格/型号/颜色" v-model="queryParam.materialParam"></a-input>
                                </a-form-item>
                            </a-col>

                            <a-col :md="5" :sm="24">
                                <a-form-item label="销售员" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                    <!-- <a-input placeholder="请输入销售员" v-model="queryParam.saleMan"></a-input> -->

                                    <a-select placeholder="选择销售员" showSearch optionFilterProp="children"
                                        v-model="queryParam.saleMan" allow-clear>
                                        <a-select-option v-for="(item, index) in userList" :key="index"
                                            :value="item.id">
                                            {{ item.userName }}
                                        </a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <a-col :md="6" :sm="24">
                                <a-form-item label="采购员" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                    <a-select placeholder="选择采购员" showSearch v-model="queryParam.supplierSalesMan"
                                        :dropdownMatchSelectWidth="false" optionFilterProp="children" allowClear>
                                        <a-select-option v-for="(item, index) in purchaseList" :key="index"
                                            :value="item.id">
                                            {{ item.username }}
                                        </a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <a-col :md="5" :sm="24">
                                <a-form-item label="部门" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                    <!-- <a-input placeholder="请输入部门" v-model="queryParam.department"></a-input> -->
                                    <a-select placeholder="选择部门" showSearch optionFilterProp="children"
                                        v-model="queryParam.department" allow-clear>
                                        <a-select-option v-for="(item, index) in departmentList" :key="index"
                                            :value="item.name">
                                            {{ item.name }}
                                        </a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>

                            <a-col :md="6" :sm="24">
                                <a-form-item label="单据日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                    <a-range-picker style="width: 100%" v-model="queryParam.createTimeRange"
                                        :default-value="defaultTimeStr" format="YYYY-MM-DD"
                                        :placeholder="['开始时间', '结束时间']" @change="onDateChange" @ok="onDateOk" />
                                </a-form-item>
                            </a-col>
                            <a-col :md="5" :sm="24">
                                <a-form-item label="订单编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                    <a-input placeholder="请输入订单编号" v-model="queryParam.orderNumber"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :md="6" :sm="24">
                                <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                                    <a-button type="primary" @click="searchQuery">查询</a-button>
                                    <a-button type="primary" style="margin-left: 8px" icon="download"
                                        @click="handleExportXls('销售明细')">导出</a-button>
                                    <!-- <a-button style="margin-left: 8px" @click="exportExcel" icon="download">导出</a-button> -->
                                </span>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
                <!-- table区域-begin -->
                <!-- <section ref="print" id="reportPrint"> -->
                <a-table bordered ref="table" size="middle" :rowKey="
            (e, index) => {
              return index
            }
          " :columns="columns" :dataSource="dataSource" :components="handleDrag(columns)" :pagination="false"
                    :scroll="scroll" :loading="loading">
                    <!-- <template slot="customHasFinancialFlag" slot-scope="text, record">
            <a-tag v-if="record.hasFinancialFlag" color="green">有</a-tag>
            <a-tag v-if="!record.hasFinancialFlag" color="red">无</a-tag>
          </template> -->
                </a-table>
                <a-row :gutter="24" style="margin-top: 8px; text-align: right">
                    <a-col :md="24" :sm="24">
                        <a-pagination @change="paginationChange" @showSizeChange="paginationShowSizeChange" size="small"
                            show-size-changer :showQuickJumper="true" :current="ipagination.current"
                            :page-size="ipagination.pageSize" :page-size-options="ipagination.pageSizeOptions"
                            :total="ipagination.total" :show-total="(total, range) => `共 ${total} 条`">
                            <template slot="buildOptionText" slot-scope="props">
                                <span>{{ props.value - 1 }}条/页</span>
                            </template>
                        </a-pagination>
                    </a-col>
                </a-row>
                <!-- </section> -->
                <!-- table区域-end -->
            </a-card>
        </a-col>
    </a-row>
</template>
<script>
import { getAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { openDownloadDialog, sheet2blob } from '@/utils/util'
import { getUserList, depAllList, queryUserListByRoleId } from '@/api/api'
import { getNowFormatMonth } from '@/utils/util'
import moment from 'moment'
export default {
    name: 'SalesDetailsList',
    mixins: [JeecgListMixin],
    components: {},
    data() {
        return {
            departmentList: [],
            userList: [],
            labelCol: {
                span: 5,
            },
            wrapperCol: {
                span: 18,
                offset: 1,
            },
            // 查询条件
            queryParam: {
                column: 'createTime',
                order: 'DESC',
                beginTime: getNowFormatMonth() + '-01',
                endTime: moment().format('YYYY-MM-DD'),
            },
            ipagination: {
                pageSize: 10,
                pageSizeOptions: ['11', '21', '31', '101', '201', '301', '1001', '2001', '3001'],
            },
            // 表头
            columns: [
                { title: '时间', dataIndex: 'createTime', width: 140, ellipsis: true },
                { title: '订单号', dataIndex: 'number', width: 140, ellipsis: true },
                { title: '销售类型', dataIndex: 'subType', width: 140, ellipsis: true },
                { title: '部门', dataIndex: 'orgAbr', width: 140, ellipsis: true },
                { title: '业务员', dataIndex: 'username', width: 140, ellipsis: true },
                { title: '采购员', dataIndex: 'supplierSalesMan', width: 140, ellipsis: true },
                { title: '货物品名', dataIndex: 'name', width: 140, ellipsis: true },
                { title: '金额', dataIndex: 'allPrice', width: 140, ellipsis: true },
                { title: '单位', dataIndex: 'materialUnit', width: 140, ellipsis: true },
                { title: '数量', dataIndex: 'operNumber', width: 140, ellipsis: true },
                // { title: '销售单价', dataIndex: 'unitPrice', width: 140, ellipsis: true },
                // { title: '极限价', dataIndex: 'lowdecimal', width: 140, ellipsis: true },
                // { title: 'VIP价', dataIndex: 'wholesaledecimal', width: 140, ellipsis: true },
                { title: '采购价', dataIndex: 'purchaseDecimal', width: 140, ellipsis: true },
                // { title: '大客户价', dataIndex: 'commodityDecimal', width: 140, ellipsis: true },
                // { title: '成本', dataIndex: 'inDecimal', width: 140, ellipsis: true },
                // { title: '成本', dataIndex: 'costDecimal', width: 140, ellipsis: true },
                // { title: '运输成本', dataIndex: 'transportCost', width: 140, ellipsis: true },
                { title: '零售价', dataIndex: 'retailPrice', width: 140, ellipsis: true },
                { title: '装卸费', dataIndex: 'otherMoney2', width: 140, ellipsis: true },
                { title: '订单备注', dataIndex: 'remark', width: 140, ellipsis: true },
                { title: '出库备注', dataIndex: 'ckRemark', width: 140, ellipsis: true },
                // {
                //   title: '是否有付款单',
                //   dataIndex: 'hasFinancialFlag',
                //   width: 140,
                //   ellipsis: true,
                //   scopedSlots: { customRender: 'customHasFinancialFlag' },
                // },
                { title: '运费', dataIndex: 'otherMoney', width: 140, ellipsis: true },
                { title: '待收款/待付款', dataIndex: 'debt', width: 140, ellipsis: true },
                { title: '收款时间', dataIndex: 'collectionOverTime', width: 180, ellipsis: true },
            ],

            url: {
                list: '/depotHead/getListWithStock',
                exportXlsUrl: '/depotHead/listWithStockExcel',
            },
            defaultTimeStr: '',
            purchaseList: [],
        }
    },
    created() {
        this.initPurchase()
        this.defaultTimeStr = [
            moment(getNowFormatMonth() + '-01', this.dateFormat),
            moment(this.currentDay, this.dateFormat),
        ]
        getUserList({}).then((res) => {
            if (res) {
                this.userList = res
            }
        })
        depAllList({
            search: { name: '', type: '' },
            column: 'createTime',
            order: 'desc',
            field: 'id,,,action,name,sort,enabled',
            currentPage: 1,
            pageSize: 1000,
        }).then((res) => {
            if (res.data.rows) {
                this.departmentList = res.data.rows
            }
        })
    },
    mounted() {},
    methods: {
        initPurchase() {
            queryUserListByRoleId({ roleId: 23 }).then((res) => {
                if (res) {
                    this.purchaseList = res.data.users
                }
            })
        },
        getQueryParams() {
            let param = Object.assign({}, this.queryParam, this.isorter)
            // if (this.depotSelected && this.depotSelected.length > 0) {
            //   param.depotIds = this.depotSelected.join()
            // }
            param.field = this.getQueryField()
            param.currentPage = this.ipagination.current
            param.pageSize = this.ipagination.pageSize
            return param
        },
        searchQuery() {
            this.loadData(1)
        },
        loadData(arg) {
            //加载数据 若传入参数1则加载第一页的内容
            if (arg === 1) {
                this.ipagination.current = 1
            }
            let params = this.getQueryParams() //查询条件
            this.loading = true
            getAction(this.url.list, params).then((res) => {
                // console.log(res.data.rows)
                if (res.code === 200) {
                    this.dataSource = res.data.rows
                    this.ipagination.total = res.data.total
                    // this.tableAddTotalRow(this.columns, this.dataSource)
                }
                if (res.code === 510) {
                    this.$message.warning(res.data)
                }
                this.loading = false
            })
        },
        onDateChange: function (value, dateString) {
            this.queryParam.beginTime = dateString[0] ? dateString[0] : null
            this.queryParam.endTime = dateString[1] ? dateString[1] : null
        },
        onDateOk(value) {
            console.log(value)
        },
        exportExcel() {
            let aoa = [
                [
                    '时间',
                    '部门',
                    '业务员',
                    '货物品名',
                    '金额',
                    '单位',
                    '数量',
                    '极限价',
                    'VIP价',
                    '采购价',
                    '大客户价',
                    '成本',
                    '销售单价',
                    '备注',
                ],
            ]
            for (let i = 0; i < this.dataSource.length; i++) {
                let ds = this.dataSource[i]
                let item = [
                    ds.createTime,
                    ds.orgAbr,
                    ds.username,
                    ds.name,
                    ds.allPrice,
                    ds.materialUnit,
                    ds.operNumber,
                    ds.lowdecimal,
                    ds.wholesaledecimal,
                    ds.purchaseDecimal,
                    ds.commodityDecimal,
                    ds.costDecimal,
                    ds.unitPrice,
                    ds.remark,
                ]
                aoa.push(item)
            }
            openDownloadDialog(sheet2blob(aoa), '销售明细')
        },
    },
}
</script>

<style scoped>
@import '~@assets/less/common.less';
</style>
<style scoped>
.item-info {
    float: left;
    width: 30px;
    height: 30px;
    margin-left: 8px;
}
.item-img {
    cursor: pointer;
    position: static;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
</style>